<template>
  <div>
    <el-card shadow="hover" class="box-card">
      <div slot="header" class="clearfix">
        <span>Count Down</span>
        <router-link :to="{name:'CreateDictionary'}">
          <i class="el-icon-plus plus" />
        </router-link>
      </div>
      <el-table v-loading="listLoading" :data="countdowns" max-height="300" :show-header="false" stripe highlight-current-row style="width: 100%">
        <el-table-column align="center" type="index" />
        <el-table-column prop="text" label="text">
          <template slot-scope="scope">
            <span style="color: steelblue;">{{ scope.row.text }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="reserved1" label="reserved1" />
        <el-table-column align="center" label="reserved1">
          <template slot-scope="scope">
            <span class="number">{{ getLeft(scope.row.reserved1) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'CountDown',
  data() {
    return {
      countdowns: null,
      listLoading: false
    }
  },
  created() {
    this.countdowns = this.$store.getters.dictionaries.filter(category => category.dictGroup === 'deadline')
  },
  methods: {
    getLeft(date) {
      try {
        const current = Date.parse(new Date())
        const total = Date.parse(date)
        return parseInt((total - current) / (1000 * 60 * 60 * 24))
      } catch (e) {
        console.log(e)
        return '-1'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.plus {
  cursor: pointer;
  color: steelblue;
  float: right;
  padding: 3px 0;
}
.number {
  font-size: 28px;
  color: tomato;
}
</style>
